<template>
	<view>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="数据源" width="150">
			</el-table-column>
			<el-table-column prop="name" label="类型">
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button size="small" link type="primary" :icon="Edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
					<el-button size="small" link type="danger" :icon="Delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
				</template>
			</el-table-column>
		</el-table>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'

interface TableDataItem {
  date: string
  name: string 
  address: string
}

const tableData = ref<TableDataItem[]>([
  {
    date: '2016-05-02',
    name: '静态',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '动态',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '动态',
    address: '上海市普陀区金沙江路 1519 弄'
  }, {
    date: '2016-05-03',
    name: '动态',
    address: '上海市普陀区金沙江路 1516 弄'
  }
])

const handleEdit = (index: number, row: TableDataItem) => {
  console.log('Edit', index, row)
}

const handleDelete = (index: number, row: TableDataItem) => {
  console.log('Delete', index, row)
}
</script>

<style>

</style>
